<template>
	<view class="evidenceDetails">
		<view class="evidenceDetails-content ff-bg-fff ff-border-radius-10">
			<view class="ff-margin-bottom-15 ff-font-16 ff-font-weight-600">
				证明材料
			</view>
			<view>{{evidenceDetails.evidenceDescription || '--'}}</view>
			<view class="evidenceDetails-content-info ff-margin-bottom-5 ff-margin-top-15">
				<u-row gutter="20">
					<u-col span="3" v-for="(item, index) of evidenceDetails.evidenceAttachList" :key="index">
						<view class="contracImg ff-margin-bottom-10 ff-relative ff-border-radius-5 ff-overflow-hidden"
							@click="previewImgClick(item)">
							<image :src="item" mode="" />
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="ff-color-999 ff-margin-top-5">
				<view class="ff-margin-bottom-7">提交时间：<text
						class="ff-color-333">{{ evidenceDetails.evidenceSubmitTime || '--' }}</text></view>
				<view v-if="evidenceDetails.evidenceReceiveTime">
					<view class="ff-margin-bottom-7">查收时间：<text
							:class="[evidenceDetails.evidenceReceiveTime?'ff-color-333':'ff-color-red']">{{ evidenceDetails.evidenceReceiveTime || '未查收' }}</text>
					</view>
					<view>消防救援机构：<text
							class="ff-color-333">{{evidenceDetails.evidenceReceiveDepartmentName || '--'}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evidenceDetails: {}, // 抽查证明材料详情
				attachesUrl: [], // 抽查证明材料的图片
			}
		},
		onLoad(e) {
			this.getQueryCheckEvidence(e.id) // 获取查询抽查证明材料详情
		},
		methods: {
			// 获取查询抽查证明材料详情
			async getQueryCheckEvidence(id) {
				let that = this
				that.$refs.loading.openLoading('加载中···'); // 打开loading动画
				that.$http.post({
					url: `/serviceOrg/checkTask/queryCheckEvidence/${id}`
				}).then(data => {
					// console.log('获取查询抽查证明材料详情', data)
					that.$refs.loading.closeLoading(); // 关闭loading动画
					if (data.code == 200) {
						this.evidenceDetails = data.data
						this.evidenceDetails.evidenceDescription = this.evidenceDetails.evidenceDescription ||
							'暂无文字说明'

					} else {
						that.$refs.uToast.show({
							title: data.msg,
							type: 'error'
						});
					}
				})

			},
			// 预览图片
			previewImgClick(item) {
				uni.previewImage({
					urls: this.evidenceDetails.evidenceAttachList,
					current: item
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evidenceDetails {
		&-content {
			margin: 30rpx 20rpx;
			padding: 30rpx 30rpx 20rpx;

			&-tips {
				background-color: #E8F0FF;
				color: #3178FF;
			}

			&-info {

				.contracImg {
					width: 100%;
					height: 140rpx;

					image {
						width: 100%;
						height: 140rpx;
					}
				}
			}
		}

		textarea {
			width: 94%;
			min-height: 200rpx;
			background: #F7F8FA;
			padding: 15rpx;
			border-radius: 10rpx;
		}
	}
</style>